<!--
  Generated template for the AddStory page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        Cancel
      </button>
    </ion-buttons>
    <ion-title>{{title}}</ion-title>
    <ion-buttons end>
      <button ion-button>
        Done
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content #content>
    <div [style.display]="disablePicture ? 'none': 'block'">
      <ion-input type="text" placeholder="Subject"></ion-input>
    </div>

    <div style="height: 200px;">
      <ion-textarea [(ngModel)]="currentText" class="story-content-input" placeholder="Content"></ion-textarea>
    </div>
    <div class="photo-container" [style.display]="disablePicture ? 'none': 'block'">
      <img-list [imgUrls]="imgUrls"></img-list>
    </div>
    <div class="photo-counter" [style.display]="disablePicture ? 'none': 'block'">
      {{imgUrls.length}}/{{maxImgCount}}
    </div>
</ion-content>

<ion-footer [keyboardAttach]="content">
  <ion-toolbar>
    <ion-buttons start>
      <button [style.display]="disableEmoji ? 'none': 'inline-block'" (click)="popupEmoji($event)" ion-button icon-only>
        <ion-icon name="ios-happy-outline" color="middle-dark"></ion-icon>
      </button>
      <button [style.display]="disablePicture ? 'none': 'inline-block'" (click)="showGallery()" [disabled]="disablePictureClick" ion-button icon-only>
        <ion-icon name="ios-image-outline" color="middle-dark"></ion-icon>
      </button>
      <button [style.display]="disablePicture ? 'none': 'inline-block'" (click)="showCamera()" [disabled]="disablePictureClick" ion-button icon-only>
        <ion-icon name="ios-camera-outline" color="middle-dark"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>
